<template>
  <div class="cesium-viewer-wapper">
    <div id="cesium-viewer" />
    <viewerSettingSidebar :viewerSource="viewerSource" />
    <MousePosition show :viewerSource="viewerSource" />
    <g3vPlayer showTime :clockOptions="clockOptions" :viewerSource="viewerSource" :sliderOption="sliderOption" v-model:playing="playing" />
  </div>
</template>

<script>
import * as Cesium from '@cesiumjs';
import { defineComponent, ref, watch } from 'vue';
import { SelectBox, SliderBar } from '@components/widgets';
import { G3V } from '@g3x';
import { MousePosition, viewerSettingSidebar, g3vPlayer } from '@g3x/g3v/ui';
import { g3a_heatmap_serious } from '@g3x/g3a';

const g3vOptions = {
  defaultViewRectangle: G3V.defaultViews.global.china.rectangle,
  viewers: [
    {
      dom: 'cesium-viewer',
      name: 'viewer1',
      title: 'viewer#01',
      viewer: {
        imageryProvider: null,
        imagery: { type: "tileImagery", options: { name: 'NaturalEarthII', title: 'NaturalEarthII', url: '//zzgis.com/cdn/3d/Assets/Textures/NaturalEarthII', fileExtension: 'jpg', brightness: 0.1, show: true } },
        // imagery: { type: 'arcgisImagery', options: { brightness: 1, show: true } , },
        // terrain: { type: 'default', options: { requestVertexNormals: true, requestWaterMask: true } },
        terrainProvider: null,
        shadows: false
      },
      layers: [
        // { type: 'tdtIboMap', options: { brightness: 1, show: true } },
        // { type: 'tdtImgAnno', options: { brightness: 1, show: true } },
        // { type: 'darkMask', options: { brightness: 1, alpha: 0.85 } },
        // { type: 'graticule', options: { brightness: 1, show: false } }
      ],
      globe: {
        // depthTestAgainstTerrain: false,
        // enableLighting: true //启用以太阳为光源的地球
      },
      navigation: {
        // defaultResetView: G3V.defaultViews.global.china.rectangle ,
        defaultResetView: null //flyHome
      },
      hideLayers: false
    }
  ]
};

export default defineComponent({
  name: 'dynInter', //
  components: { SelectBox, SliderBar, viewerSettingSidebar, g3vPlayer, MousePosition },
  setup() {
    return { heatmapSerious: null };
  },
  props: {},
  data() {
    return {
      playing: false,
      g3v: null,
      timeStart: '2021-05-03T00:00:00+08:00',
      timeEnd: '2021-05-09T00:00:00+08:00',
      sliderOption: { min: 0, max: 3600 * 24, step: 100 }
    };
  },
  computed: {
    viewer() {
      return this.g3v && this.g3v.viewer$1;
    },
    viewerSource() {
      const { viewer } = this;
      return { viewer };
    },
    clockOptions() {
      const { timeStart, timeEnd } = this;
      const startTime = Cesium.JulianDate.fromIso8601(timeStart);
      const stopTime = Cesium.JulianDate.fromIso8601(timeEnd);
      const clockRange = Cesium.ClockRange.LOOP_STOP;
      return { multiplier: 3600 * 2, startTime, stopTime, clockRange };
    }
  },
  watch: {},
  mounted() {
    console.log('dynInter mounted');
    this.initViewer();
  },
  beforeUnmount() {},
  unmounted() {
    this.heatmapSerious && this.heatmapSerious.destroy();
    this.heatmapSerious = null;
    this.g3v && this.g3v.destroy();
    this.g3v = null;
  },
  methods: {
    initViewer() {
      let vm = this;
      vm.g3v = new G3V(g3vOptions,()=>{
        vm.onViewerInited();
        vm.initEffects();
      });
    },
    onViewerInited() {},
    initEffects() {
      let vm = this;
      const viewer = this.viewer;
      var scene = viewer.scene;

      const timeStart = '2021-05-04T00:00:00+08:00';
      const timeEnd = '2021-05-09T00:00:00+08:00';
      vm.timeStart = timeStart;
      vm.timeEnd = timeEnd;

      const config = {
        position: [2.0313527955350708, 0.6964650964888595, 4000],
        origin: [0.1, 0.9],

        // 在地球上的实际尺寸，单位是米
        width: 20000,
        height: 10000,
        rows: 100,
        columns: 100,

        // 调色板参数，第一个代码值域，范围在0-1之间，第二个为css颜色字符串
        gradient: [[0.0, 'rgba(0, 0, 0, 0.0)'], [0.2, 'rgba(0, 0, 255, 0.1)'], [0.4, 'rgba(0, 255, 0, 0.4)'], [0.6, 'rgba(255, 255, 0, 0.6)'], [0.8, 'rgba(255, 0, 0, 0.8)']],
        maxValue: 1000,

        timeStart,
        timeEnd
      };

      const dataSources = [];

      {
        let data = [[10, 10, 400], [10, 90, 0], [50, 50, 200], [90, 10, 800], [90, 90, 0]];
        dataSources.push({ time: '2021-05-04T12:00:00+08:00', data });
        data = [[10, 10, 100], [10, 90, 500], [50, 50, 800], [90, 10, 300], [90, 90, 1000]];
        dataSources.push({ time: '2021-05-05T12:00:00+08:00', data });
        data = [[10, 10, 500], [10, 90, 1000], [50, 50, 200], [90, 10, 1000], [90, 90, 100]];
        dataSources.push({ time: '2021-05-06T12:00:00+08:00', data });
        data = [[10, 10, 1000], [10, 90, 100], [50, 50, 0], [90, 10, 1000], [90, 90, 500]];
        dataSources.push({ time: '2021-05-07T12:00:00+08:00', data });
        data = [[10, 10, 300], [10, 90, 800], [50, 50, 0], [90, 10, 1000], [90, 90, 300]];
        dataSources.push({ time: '2021-05-08T12:00:00+08:00', data });
      }

      vm.heatmapSerious = new g3a_heatmap_serious(viewer, config, dataSources);
      vm.heatmapSerious.flyTo({
        complete: () => {
          vm.playing = true;
        }
      });
    }
  }
});
</script>

<style lang="less"></style>
